<html>

<head></head>

<style>
  .operation {
    margin: 20px auto;
  }

  .operation>button {
    margin: 20px;
  }

  .form>p {
    width: 300px;
    display: flex;
    justify-content: space-between;
  }
</style>

<body>
  <div>
    <p>{{msg}}</p>
    <p>欢迎进行数据操作</p>

    <div class="form">
      <p>id:<input id="id" type="number" value="2"></p>
      <p>name:<input id="name" type="text"></p>
      <p>desc:<input id="desc" type="text"></p>
      <p>file:<input id="file" type="text"></p>
      <p>view:<input id="view" type="text"></p>
      <p>isPulish:<input id="isp" type="text"></p>
    </div>

    <div class="operation">
      <button onclick="getData()">get</button>
      <button onclick="createData()">post</button>
      <button onclick="updataData()">update</button>
      <button onclick="deleteData()">delete</button>
    </div>


    <div>原数据：</div>
    <div id="content">

    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script>
  var baseURL = 'http://localhost:5020'

  var request = window.indexedDB.open('forFront');
  request.onupgradeneeded = function (event) {
    db = event.target.result;
    var objectStore;
    if (!db.objectStoreNames.contains('person')) {
      objectStore = db.createObjectStore('person', { keyPath: 'id' });
    }
  }

  function getData() {
    var id = $('#id').val()

    $.ajax({
      url: baseURL + '/photo',
      type: 'GET',
      data: {
        id: id
      },
      success: (res) => {
        alert('获取成功')
        changeDIV(res)
      }
    })
  }

  function createData() {

    var name = $('#name').val()
    var desc = $('#desc').val()
    var file = $('#file').val()
    var view = $('#view').val()
    var isp = $('#isp').val()

    $.ajax({
      url: baseURL + '/photo',
      type: 'POST',
      data: {
        name: name,
        description: desc,
        filename: file,
        views: view,
        isPublished: isp
      },
      success: (res) => {
        alert('提交成功')
      }
    })
  }

  function updataData() {
    var id = $('#id').val()
    var name = $('#name').val()
    var desc = $('#desc').val()
    var file = $('#file').val()
    var view = $('#view').val()
    var isp = $('#isp').val()

    $.ajax({
      url: baseURL + '/photo',
      type: 'PUT',
      data: {
        id: id,
        name: name,
        description: desc,
        filename: file,
        views: view,
        isPublished: isp
      },
      success: (res) => {
        alert('修改成功')
      }
    })
  }

  function deleteData() {
    $.ajax({
      url: baseURL + '/photo',
      type: 'DELETE',
      success: (res) => {
        alert('删除成功')
      }
    })
  }

  function changeDIV(r) {
    $('#content').text(JSON.stringify(r))

    var res = r.data

    $('#id').val(res.id)
    $('#name').val(res.name)
    $('#desc').val(res.description)
    $('#file').val(res.filename)
    $('#view').val(res.views)
    $('#isp').val(res.isPublished)
  }


</script>

</html>